<!-- @format -->

<template>
  <div class="big_userinfo">
    <!-- 修改头像 -->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span :style="{ color: color }">修改头像</span>
        </div>
      </template>
      <div>
        <el-upload  :headers="headers" class="upload_image"
          :before-upload="beforeAvatarUpload" :http-request="uploadImage" :show-file-list="false">
          <el-image :src="userinfo.image" v-if="userinfo.image"/>
          <el-icon :size="40" color="#a8abb2" v-else>
            <Plus />
          </el-icon>
        </el-upload>
      </div>
    </el-card>
    <!-- 个人信息 -->
    <el-card class="box-userinfo-message">
      <template #header>
        <div class="card-header">
          <span :style="{ color: color }">基本信息</span>
          <div class="switchChanegUserInfo" @click="switchChanegUserInfo">
            <el-icon :color="color">
              <Switch />
            </el-icon>
            <div class="operate" :style="{ color: color }">
              {{ showLookUserInfo ? "基本信息" : "修改信息" }}
            </div>
          </div>
        </div>
      </template>
      <!-- 查看 -->
      <div v-if="showLookUserInfo">
        <div class="flex-userinfoMessage">
          <div class="flex-nowrap">用户名</div>
          <el-input v-model="userinfo.username" disabled placeholder="暂无用户名"></el-input>
        </div>
        <div class="flex-userinfoMessage">
          <div class="flex-nowrap">住址</div>
          <el-input v-model="userinfo.address" disabled placeholder="暂无住址"></el-input>
        </div>
        <div class="flex-userinfoMessage">
          <div class="flex-nowrap">手机号</div>
          <el-input v-model="userinfo.phone" disabled placeholder="暂无手机号码"></el-input>
        </div>
        <div class="flex-userinfoMessage">
          <div class="flex-nowrap">性别</div>
          <div>{{ userinfo.sex == 0 ? "男" : "女" }}</div>
        </div>
        <div class="flex-userinfoMessage">
          <div class="flex-nowrap">邮箱</div>
          <el-input v-model="userinfo.email" disabled placeholder="暂无邮箱"></el-input>
        </div>
        <div class="flex-userinfoMessage">
          <div class="flex-nowrap">昵称</div>
          <el-input v-model="userinfo.nickname" disabled placeholder="暂无昵称"></el-input>
        </div>
      </div>
      <!-- 修改 -->
      <div v-else>
        <el-form ref="userinfo" :model="userinfo" :rules="rules" @submit.native.prevent="onSubmit" label-width="80px">
          <el-form-item label="用户昵称" prop="nickname">
            <el-input maxlength="30" v-model="userinfo.nickname" />
          </el-form-item>
          <el-form-item label="住址" prop="address">
            <el-input maxlength="30" v-model="userinfo.address" />
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input maxlength="11" v-model="userinfo.phone" />
          </el-form-item>
          <el-form-item label="用户邮箱" prop="email">
            <el-input maxlength="50" v-model="userinfo.email" />
          </el-form-item>
          <el-form-item label="用户性别">
            <el-radio-group v-model="userinfo.sex">
              <el-radio label="0">男</el-radio>
              <el-radio label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button type="danger" @click="onClose">关闭</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { UserinfoApi, UserinfoEditApi, imageUpload } from "../../api/index";
export default {
  name: "UserInfo",
  data() {
    return {
      color: "#8bc4ff",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      userinfo: {
        nickname: "",
        phone: "",
        email: "",
        sex: "1",
        address: "",
        image: "",
        username: "",
        image: "",
      },
      rules: {
        nickname: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" },
        ],
        address: [{ required: true, message: "住址不能为空", trigger: "blur" }],
        email: [
          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        phone: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },
      showLookUserInfo: false,
    };
  },
  //计算属性
  // computed:{
  //   getInputLength(){
  //     return this.inputMessage.length >  10 ? 'yes':'no'
  //   }
  // },
  mounted() {
    this.getUserinfoMessage();
  },

  methods: {
    //参数必须是param，才能获取到内容
    uploadImage(param) {
      // 获取上传的文件名
      var file = param.file;
      //发送请求的参数格式为FormData
      const formData = new FormData();
      formData.append("file", file);
      // 调用param中的钩子函数处理各种情况，这样就可以用在组件中用钩子了。也可以用res.code==200来进行判断处理各种情况
      imageUpload(formData, param)
        .then((res) => {
          if(res.data.code == 1){
            this.userinfo.image = res.data.data.path
          }
          // param.onSuccess(res);
        })
        .catch((err) => {
          param.onError(err);
        });
    },
    beforeAvatarUpload(file) {
      console.log(file.type);
      // if (
      //   file.type != "image/jpeg" ||
      //   file.type != "image/png" ||
      //   file.type != "image/gif"
      // )
      //   return this.$message.error("上传头像图片只能是 JPG、PNG、GIF 格式!");
      if (file.size > 500000)
        return this.$message.error("上传头像图片大小不能超过 5mb!");
    },
    switchChanegUserInfo() {
      if(!this.userinfo.nickname) return this.$message.error("请先填写昵称")
      if(!this.userinfo.address) return this.$message.error("请先填写住址")
      if(!this.userinfo.phone) return this.$message.error("请先填写手机号码")
      if(!this.userinfo.email) return this.$message.error("请先填写邮箱")
      this.showLookUserInfo = !this.showLookUserInfo;
    },
    getUserinfoMessage() {
      UserinfoApi().then((res) => {
        this.userinfo = res.data.data;
      });
    },
    onSubmit() {
      this.$refs.userinfo.validate((valid) => {
        if (valid) {
          UserinfoEditApi(this.userinfo).then((res) => {
            if (res.data.code == 1) {
              this.$message({
                type: "success",
                message: res.data.msg,
                duration: 1500,
                onClose: () => {
                  this.showLookUserInfo = true;
                },
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
              });
            }
          });
        } else {
          this.$message({
            type: "warning",
            message: "请填写完整信息",
          });
        }
      });
    },
    onClose() {
      this.showLookUserInfo = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-image{
  margin-top: 40px;
  height: 200px;
  width: 180px;
}
.big_userinfo {
  display: flex;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 240px;
  height: 300px;

  .upload_image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
  }
}

.box-userinfo-message {
  flex: 1;
  margin-left: 20px;

  .flex-userinfoMessage {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;

    .flex-nowrap {
      width: 60px;
    }
  }

  .onSumbitUserinfo {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}

.switchChanegUserInfo {
  display: flex;
  align-items: center;

  .operate {
    margin-left: 10px;
    cursor: pointer;
  }
}
</style>
